<template>
  <div id="container">
    <div class="videoList">
      <chartTitle :title="title"></chartTitle>
      <div class="btnBox">
        <p class="btn btn1" :style="!prev?'cursor:not-allowed;':''" @click="onPrev"></p>
        <p class="btn btn2" :style="!next?'cursor:not-allowed;':''" @click="onNext"></p>
        <p class="btn btn3" @click="onMore">更多></p>
      </div>
      <div v-show="isLoading" class="yzt_loading"><a-icon type="loading" />查询中...</div>
      <div class="playerBox">
        <VideoPlayer
          class="itemPlayer"
          v-for="(item, index) in list"
          :key="index"
          ref="videoPlayerId"
          :url="item.url"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getDeviceGrid } from '../../api/index.js'
import VideoPlayer from './videoPlayer.vue'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle,
    VideoPlayer
  },
  name: 'itemBox',
  props: {
    title: String,
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isLoading: false,
      pageNo: 1,
      pageSize: 6,
      total: 0,
      //https://live.cgtn.com/1000/prog_index.m3u8
      //https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8
      list: []
    }
  },
  computed: {
    totalPageNo() {
      let pageNo = 1
      if(this.total && (this.total>=this.pageSize)) {
        pageNo = Math.ceil(this.total / this.pageSize)
      }
      return pageNo
    },
    prev() {
      if(this.totalPageNo>=this.pageNo && this.pageNo>1) {
        return true
      } else {
        return false
      }
    },
    next() {
      if(this.totalPageNo>this.pageNo) {
        return true
      } else {
        return false
      }
    }
  },
  mounted() {
    this.onInit()
  },
  methods: {
    onInit() {
      this.isLoading = true
      let pageFilter = { pageNo: this.pageNo,  pageSize: this.pageSize}
      getDeviceGrid(pageFilter).then(res => {
        this.isLoading = false
        if (res.success) {
          let result = res.result ? res.result : {}
          this.list = Object.keys(result).length>0 && result.records ? result.records.map(item => {
            return {
              name: item.deviceName,
              url: item.streamUrl
            }
          }) : []
          this.total = Object.keys(result).length>0 && result.total ? result.total : 0
        } else {
          this.$message.warn(res.message)
        }
      }).catch(e => {
        this.isLoading = false
        this.$message.warn('请求失败！')
      })
    },
    onPrev() {
      if(this.prev) {
        this.pageNo = this.pageNo-1
        this.onInit()
      }
    },
    onNext() {
      if(this.next) {
        this.pageNo = this.pageNo+1
        this.onInit()
      }
    },
    onMore() {
      let path = '/videoManage/areaList', query={}
      this.$router.push({ path: path, query })
    },
    onGunClick(url) {
      // this.$refs.videoPlayerId.setVideoUrl(url)
    }
  }
}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 20.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);
  position: relative;
  .videoList {
    margin-top: 2vh;
    width: 100%;
    height: 80vh;
    padding: 1.5vh 3vh;
    background-image: url(../../image/index/listBg.png);
    background-size: 100% 100%;
    .btnBox {
      position: absolute;
      right: 2vh;
      top: 1vh;
      display: flex;
      .btn1 {
        width: 4vh;
        height: 4vh;
        cursor: pointer;
        background-image: url(../../image/index/prev.png);
        background-size: 100% 100%;
      }
      .btn2 {
        width: 4vh;
        height: 4vh;
        cursor: pointer;
        background-image: url(../../image/index/next.png);
        background-size: 100% 100%;
      }
      .btn3 {
        font-size: 1.5vh;
        cursor: pointer;
        padding: 1vh 2vh;
        background-image: url(../../image/index/btnBg.png);
        background-size: 100% 100%;
      }
    }
    .playerBox {
      overflow: hidden;
      margin-top: 1%;
      .itemPlayer {
        float: left;
        width: 48%;
        // height: 22.4vh;
        margin-left: 1%;
        margin-bottom: 6vh;
      }
    }
    .yzt_loading {
      position: fixed !important;
      left: 50%;
      top: 50%;
      z-index: 10000;
      transform: translate(-50%, -100px);
      border-radius: 10px;
      width: 200px;
      line-height: 100px;
      text-align: center;
      font-size: 24px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.6);
      i {
        margin-right: 12px;
      }
    }
  }
}
</style>
